<template>
  <div>
    <big-img
      class="big-img"
      v-show="showBigImg"
      @clickit="showBigImg = false"
      :imgSrc="avatar || img"
    />
    <div class="user-info">
      <a-avatar
        @click.native="bigImgShow"
        :size="44"
        :src="avatar || img"
        icon="user"
      />
      <div class="user-info-msg">
        <div>{{ userName || "xxx" }}，{{ timeNow }}好!</div>
        <div v-if="false">{{ helo }}</div>
      </div>
      <div class="user-info-qr">
        <div class="qr-title">{{ weather.temperature }}°C</div>
        <div class="qr-icon">
          <span ref="weachericon" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import { iconMap } from "./map";
import BigImg from "@/views/home/home-userinfo/bigimg";
export default {
  data() {
    return {
      showBigImg: false,
      timeNow: "",
      img: require("@/assets/img/touxiang.png"),
      helo: "",
      iconMap,
      test: "ccc",
    };
  },
  created() {
    this.getTimeNow();
  },
  methods: {
    bigImgShow() {
      this.showBigImg = true;
    },
    getTimeNow() {
      const time = new Date().getHours();
      if (time >= 0 && time < 10) {
        return (this.timeNow = "上午");
      }
      if (time >= 10 && time < 13) {
        return (this.timeNow = "中午");
      }
      if (time >= 13 && time < 18) {
        return (this.timeNow = "下午");
      }
      if (time >= 18 && time <= 24) {
        return (this.timeNow = "晚上");
      }
    },
    getHelloWord() {
      const data = this.weather;
      const qw = data.temperature;
      const arr = ["雨", "雪"];
      let str = "";
      arr.forEach((item) => {
        if (data.weather.indexOf(item) !== -1) {
          str += `今天${data.weather},出门记得带伞。`;
        }
      });
      if (qw > 30) {
        str += "天气酷热，小心中暑 ";
      } else if (qw > 15) {
        str += "温度很是舒适呢 ";
      } else if (qw > 10) {
        str += "天气寒冷，多穿点衣服哦 ";
      } else if (qw > -10) {
        str += "天气巨冷，我的军大衣呢!";
      } else {
        str += "天气恶劣，壮士请多保重 ";
      }
      this.helo = str;
    },
  },
  props: {
    weather: {
      type: Object,
      default() {
        return {};
      },
    },
    userName: {
      type: String,
      default: "xxx",
    },
    avatar: {
      type: String,
      default: "",
    },
  },
  watch: {
    weather: {
      handler: function(newV) {
        const type = newV.weather;
        const ele = this.$refs.weachericon;
        let icon = this.iconMap[type];
        if (icon === undefined) {
          // 风 霾 雨 浮尘  雾
          const types = ["风", "霾", "雨", "尘", "雾"];
          const len = types.length;
          for (let i = 0; i < len; i++) {
            if (type.indexOf(types[i]) !== -1) {
              if (i === 0) {
                icon = "icon-dafeng";
                break;
              } else if (i === 1 || i === 3) {
                icon = "icon-wumai";
                break;
              } else if (i === 2) {
                icon = "icon-baoyu";
                break;
              } else if (i === 4) {
                icon = "icon-dawubaitian";
                break;
              }
            }
          }
        }
        if (icon === undefined) {
          icon = "icon-qingtianbaitian";
        }
        ele.setAttribute("class", `iconfont ${icon}`);
        this.getHelloWord();
      },
    },
  },
  components: {
    BigImg,
  },
};
</script>

<style lang="less" scoped>
@import "~@/views/home/home-userinfo/mixins.less";
@import "~@/views/home/home-userinfo/weacher/iconfont.css";

.user-info {
  @font-color: #fff;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: @font-color;
  margin-left: @bianju;
  width: calc(100% - @bianju * 2);
  .center(v);
  .user-info-msg {
    margin-left: 5px;
    flex: 2;
  }
  .user-info-qr {
    text-align: right;
    width: @bianju * 3;
    height: @bianju * 3;
    // .center(v);
    flex-direction: column;
    .qr-title,
    .qr-icon {
      width: 100%;
      font-size: 14px;
    }
    .qr-title {
      font-size: 14px;
      height: 40%;
      position: relative;
      right: 2px;
    }
    .iconfont {
      font-size: 25px;
    }
  }
}
.big-img {
  position: relative;
  z-index: 999;
}
</style>
